<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../common/testdata.js"></script>
		<style>
			#areaA, #areaB {
				margin: 50px 10px;
				width:320px;
				height:400px;
				float: left;
			}
            
		</style>
		<title>Manual view recreating</title>
	</head>
	<body>
		<div id="areaA"></div>


		<script type="text/javascript" charset="utf-8">
        function showAbout(){
             webix.ui.animate({
                id:"aboutView", template:"About page...",
            }, $$("listView"));
        }
        function showList(){
             webix.ui.animate( {
                id:"listView",
                view:"list",
                template:"#rank#. #title# <div style='padding-left:18px'> Year:#year#, votes:#votes# </div>",
                type:{
                    height:60
                },
                select:true,
                data:big_film_set
            }, $$("aboutView"));
        }

		webix.ui({
		    container: "areaA",
            rows:[
                {
                   view:"segmented", id:'tabbar', value: 'listView', multiview:true, optionWidth:80,  align:"center", padding: 5, options: [
                        { value: 'List', id: 'listView'},
                        { value: 'About', id: 'aboutView'}
                    ],
                    on:{
                        onChange:function(){
                           if (this.getValue() == "aboutView")
                                showAbout();
                            else
                                showList();
                        }
                    }
                },
                {height: 5},
                { rows:[
                      { id:"aboutView" }         
                ]}
            ]
        });

        showList();
            


		</script>
	</body>
</html>